<template>
  <div id="app">
    <!-- <div id='stars'></div>
  <div id='stars2'></div>
  <div id='stars3'></div> -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  mounted () {
    document.onkeydown = e => {
      if (e.keyCode === 32 && this.$route.name === 'getAward') {
        this.$router.push({ name: 'AwardPerson' })
        this.$router.go(0)
      }
      if (e.keyCode === 37 && this.$route.name === 'getAward') {
        this.$router.push({ name: 'SignedView' })
        this.$router.go(0)
      }
      if (e.keyCode === 37 && this.$route.name === 'AwardPerson') {
        this.$router.push({ name: 'getAward' })
        this.$router.go(0)
      }
      if (e.keyCode === 39 && this.$route.name === 'SignedView') {
        this.$router.push({ name: 'getAward' })
        this.$router.go(0)
      }
    }
  }
}
</script>

<style lang="less">
html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Arial;
  overflow: hidden;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}
</style>
